import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'

const TodoListUi = (props) => { // 无状态组件：可以提高程序性能
    return (
        <div style={{ margin: '10px' }}>
            <div>
                <Input placeholder={props.inputValue} style={{ width: '250px', marginRight: '10px' }}
                    //---------关键代码----start
                    onChange={props.changeInputValue}
                //---------关键代码----end
                />
                <Button type='primary' onClick={props.clickBtn}>增加</Button>
            </div>
            <div style={{ marginTop: '10px', width: '320px' }}>
                <List
                    size="small"
                    header={<div>Header</div>}
                    footer={<div>Footer</div>}
                    bordered
                    dataSource={props.list}
                    renderItem={(item, index) => <List.Item onClick={() => { props.deleteItem(index) }}>{item}</List.Item>}
                />
            </div>
        </div>
    );
}

export default TodoListUi;